<template>
  <div class="auth-container">
    <div class="auth-header">
      <div class="logo-container">
        <span class="system-name">农产品宣传直播销售系统</span>
      </div>
    </div>

    <div class="auth-box">
      <el-card class="auth-card">
        <h3 class="auth-title">{{ isMerchant ? '商家注册' : '用户注册' }}</h3>
        <el-form :model="user" class="auth-form" label-position="top">
          <el-form-item label="用户名">
            <el-input
                v-model="user.username"
                placeholder="请输入用户名"
                clearable
            />
          </el-form-item>

          <el-form-item label="密码">
            <el-input
                v-model="user.password"
                type="password"
                placeholder="请输入密码"
                show-password
            />
          </el-form-item>

          <el-form-item label="手机号">
            <el-input
                v-model="user.phone"
                placeholder="请输入手机号"
                clearable
            />
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                class="auth-button"
                @click="reg"
            >
              {{ isMerchant ? '注册商家账号' : '注册用户账号' }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="auth-footer">
          <div class="footer-left">
            <span>已有账号？</span>
            <el-link type="primary" @click="goToLogin">立即登录</el-link>
          </div>
          <div class="footer-right">
            <el-link
                type="primary"
                @click="toggleRegisterType"
            >
              {{ isMerchant ? '← 返回用户注册' : '商家注册 →' }}
            </el-link>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";

// 控制注册类型切换
const isMerchant = ref(false);

// 定义对象来保存用户输入的注册数据
const user = ref({
  username: '',
  password: '',
  phone: '',
  role: 1, // 默认普通用户
  permission: 0
});

// 切换注册类型
const toggleRegisterType = () => {
  isMerchant.value = !isMerchant.value;
  // 切换时更新角色值
  user.value.role = isMerchant.value ? 2 : 1;
  // 清空表单
  user.value.username = '';
  user.value.password = '';
  user.value.phone = '';
};

// 定义注册方法
const reg = () => {
  // 准备提交的数据
  const submitData = { ...user.value };

  console.log(submitData);
  axios.post(BASE_URL + '/api/v1/users/public/reg', submitData)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('注册成功');
          router.push('/login');
        } else {
          ElMessage.error(response.data.msg);
          resetForm();
        }
      })
      .catch((error) => {
        ElMessage.error('注册请求失败');
        console.error('注册错误:', error);
      });
}

// 重置表单
const resetForm = () => {
  user.value = {
    username: '',
    password: '',
    phone: '',
    role: isMerchant.value ? 2 : 1,
    permission: 0
  };
}

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login');
}
</script>

<style scoped>
.auth-container {
  height: 100vh;
  /*background-color: #fff;*/
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* 新增背景样式 */
  /*background-image: url('/img/login.png');*/
  background-image: url('../../public/imgs/reg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.auth-header {
  padding: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.system-name {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.auth-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0 30px;
}

.auth-card {
  width: 450px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: none;
}

.auth-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 20px;
}

.auth-form {
  padding: 0 30px;
}

.auth-button {
  width: 100%;
  margin-top: 10px;
  height: 40px;
}

.auth-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 20px;
  margin-top: 10px;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
}

.footer-left span {
  color: #666;
  font-size: 14px;
  margin-right: 5px;
}

.el-link {
  font-size: 14px;
}
</style>